{% extends "baseadmin.html" %}

{% block title %}Markdown 美化{% endblock %}

{% block maincontent %}
<div class="container-fluid mt-3 border-1">
    <div class="row mb-3">
        <div class="col">
            <!-- 用flex 横向布局 -->
            <div class="d-flex justify-content-start">
                <input type="file" class="form-control me-2 w-25" id="mdFile" accept=".md,.markdown">
                <select class="form-select me-2" id="styleSelect" style="width: auto;">
                    {% for style in styles %}
                    <option value="{{ style }}">{{ style }}</option>
                    {% endfor %}
                </select>
                <div class="d-flex justify-content-end">
                    <button class="btn btn-outline-success me-2" id="copyBtn">复制HTML</button>
                    <button class="btn btn-outline-primary" id="downloadBtn">下载HTML</button>
                </div>
                
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <textarea id="mdInput" class="form-control p-2" style="height: 80%; padding: 10px;"></textarea>
        </div>
        <div class="col-6">
            <div id="htmlPreview" class="markdown-body" style="overflow-y: auto;height: 80%; padding: 10px;"></div>
        </div>
    </div>
</div>


<script>

// 在页面的head中动态插入样式表
document.addEventListener('DOMContentLoaded', () => {
    const head = document.head;
    const link = document.createElement('link');
    link.id = 'mdnice-style';
    link.rel = 'stylesheet';
    link.href = '{{ url_for("static", filename="css/mdnice") }}/default.css';
    head.appendChild(link);
});

const updatePreview = async () => {
    const markdown = document.getElementById('mdInput').value;
    const response = await fetch('/mdnice/convert', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({markdown})
    });
    const data = await response.json();
    document.getElementById('htmlPreview').innerHTML = data.html;
};

document.getElementById('mdInput').addEventListener('input', updatePreview);
document.getElementById('styleSelect').addEventListener('change', (e) => {
    // 应用新的样式表
    const link = document.getElementById('mdnice-style');
    link.href = `{{ url_for('static', filename='css/mdnice') }}/${e.target.value}.css`;

    document.getElementById('htmlPreview').className = `markdown-body`;
});

// 文件上传处理
document.getElementById('mdFile').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append('file', file);
    
    const response = await fetch('/mdnice/upload', {
        method: 'POST',
        body: formData
    });
    const data = await response.json();
    document.getElementById('mdInput').value = data.markdown;
    document.getElementById('htmlPreview').innerHTML = data.html;
});

// 下载按钮事件处理
document.getElementById('downloadBtn').addEventListener('click', async () => {
    const link = document.getElementById('mdnice-style');
    style = link.href;
    const htmlContent = document.getElementById('htmlPreview').innerHTML;
    
    try {
        const response = await fetch('/mdnice/downhtml', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                style: style,
                htmlcontent: htmlContent
            })
        });
        
        const data = await response.json();
        if (data.code === 200) {
            window.open(data.path, '_blank');
        } else {
            console.log('后端-下载失败：' + data.msg);
        }
    } catch (error) {
        console.log('下载失败：' + error.message);
    }
});

</script>

{% endblock %}
